import React from 'react'
import { Row, Col, Layout, BackTop } from 'antd'
import PCHeader from './pc_header'
import PCFooter from './pc_footer';
import PCBewsImageBlock from './pc_news_image_block';
import CommonComments from '../common_comment'
import { withRouter } from 'react-router-dom'
import { store } from '../../store/store'

const { Content } = Layout;

class PCNewsDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newsItem: '',
      uniquekey: this.props.match.params.uniquekey
    }
  }

  componentDidMount() {
    const uniquekey = this.state.uniquekey
    store.getNewDetail(uniquekey)
      .then(newsItem => {
        this.setState({
          newsItem
        })
        document.title = newsItem.title
      })
  }

  componentWillReceiveProps(nextProps) {
    const uniquekey = nextProps.match.params.uniquekey
    store.getNewDetail(uniquekey)
      .then(newsItem => {
        this.setState({
          newsItem,
          uniquekey
        })
        document.title = newsItem.title
      })
  }

  render() {
    return (
      <div>
        <PCHeader></PCHeader>
        <Content>
          <Row></Row>
          <Row>
            <Col span={1}></Col>
            <Col span={14}>
              <div dangerouslySetInnerHTML={{ __html: this.state.newsItem.pagecontent }}></div>
              <hr></hr>
              <CommonComments uniquekey={this.state.uniquekey}></CommonComments>
            </Col>
            <Col span={6} offset={2}>
              <PCBewsImageBlock count={40} type='top' width='100%' cardTitle='相关新闻' imageWidth='150px'></PCBewsImageBlock></Col>
            <Col span={1}></Col>
          </Row>
        </Content>
        <PCFooter></PCFooter>
        <BackTop></BackTop>
      </div>
    )
  }
}

export default withRouter(PCNewsDetails)
